<script lang="ts" setup>
import NumberInput from "./components/NumberInput/index.vue";
import inputConfig from "./config/inputConfig";
import { useOverlayRefs } from "./hooks/useOverlay";
import useNumbers, { useNumbersRefs } from "./hooks/useNumbers";
import AddNewLine from "./components/AddNewLine/index.vue";
import SearchBtns from "./components/SearchBtns/index.vue";
import DeviceBar from "./components/DeviceBar/index.vue";
import DatePicker from "./components/DatePicker/index.vue";
import RecordRTC from "./components/RecordRTC/index.vue";
import { useRecordRTCRefs } from "./hooks/useRecordRTC";
import WinRes from "./components/WinRes/index.vue";
import { useWinResRefs } from "./hooks/useWinRes";
const { show, style, refreshOverlay } = useOverlayRefs();
const { showRecord } = useRecordRTCRefs();
const { addNumber } = useNumbers();
const { resNumbers, refreshNumIpt } = useNumbersRefs();
const { showWinRes } = useWinResRefs();
</script>
<template>
  <Teleport to="body">
    <van-overlay
      :lock-scroll="false"
      z-index="1001"
      :show="show"
      @click="show = false"
      :key="refreshOverlay"
      :style="style"
    >
      <div
        @click.stop
        class="absolute top-8% left-50% translate-x-[-50%] w-362 h-595 bg-[#fff] shadow-[0px_4px_4px_0px_rgba(120,172,206,0.22)] rounded-16 pt-20 px-14 pb-36"
      >
        <div
          class="font-normal text-26 color-[#000] lh-30 text-center not-italic mb-8"
        >
          {{ $t("title15") }}
        </div>
        <DatePicker />
        <DeviceBar />
        <div :key="refreshNumIpt" class="h-261 overflow-y-scroll scroll-bar">
          <div v-for="({ type }, idx) in resNumbers" :key="idx">
            <NumberInput
              v-model:numbers="resNumbers[idx].numbers"
              v-model:count="resNumbers[idx].count"
              v-model:showKeyboard="resNumbers[idx].showKeyboard"
              :idx="idx"
              :type="type"
              :style="inputConfig[type].style"
              :showError="inputConfig[type].showError"
            />
          </div>
        </div>
        <AddNewLine @update:addNumber="addNumber" />
        <SearchBtns />
      </div>
      <RecordRTC v-if="showRecord" />
      <WinRes v-if="showWinRes" />
    </van-overlay>
  </Teleport>
</template>
